<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="js/bootstrap_5.1.1_js_bootstrap.bundle.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap_5.1.1_css_bootstrap.min.css">
<style>
	*{
		margin: 0px;
		height: 0px;
	}
	body{
        background-color: rgb(245, 246, 250);
	}
	a{
		text-decoration: none;
		font-size: 1.5vw;
		color: rgb(93, 79, 87);
	}
	nav{
		background-color:white;
		display: inline-block;
		position: relative;
		width: 100vw;
		height: 10vh;
		position: fixed;
		z-index: 1;
		font-size: 1vw;
	}
	#log{
		width:12vw;
		height: 100%;
		display: inline-block;
		position: relative;
		left: 10%;
	}
	li{
		border: 0.1vh solid;
		margin-right: 0.1vw;
		margin-top: 0.1vh;
		text-align: center;
		list-style: none;
		width: 15vw;
		height: 5vh;
	}
	#box{
		margin: auto;
		width: 90vw;
		height: 100vh;
		position: relative;
		top: 10vh;
	}
	#head{
		position: relative;
		width: 100%;
		height: 20vh;
		top: 1vh;
		background-color: white;
	}
	#information{
		position: relative;
		width: 50%;
		height: 50%;
	}
	.fc_box{
		width: 20vw;
		height: 5vh;
		position: relative;
		top: 4vh;
        right: 20vw;
	}
	.fc{
		height: 100%;
		margin-right: 1vw;
		color: white;
		background-color: rgb(251, 114, 153);
	}
	.fc1{
		height: 100%;
		color: white;
		background-color: rgb(0, 174, 236);
	}
	#information div{
		position: relative;
		left: 2%;
		bottom: 8vh;
	}
	#headImg{
	   position: relative;
	   top: 15%;
	   left: 5%;
       width: 100px;
       height: 100px;
       background-color: rgb(200, 200, 200);
       border: 1px solid; 
       border-radius: 50%;
	}
	#name{
		font-size: 3vh;
	}
	#information p{
		position: relative;
		top: 50%;
		float: left;
		left: 20%;
	}
	#information p span{
		display: inline-block;
	}
	#J{
		position: relative;
		margin-top: 5%;
		width: 50%;
		color: rgb(197, 197, 201);
	}
	#bottom{
		position: relative;
		margin-top: 2%;
		width: 100%;
		background-color: white;
	}
	#fans{
		position: relative;
		top: 5%;
		width: 15vw;
	}
	#fans li{
		background-color: rgb(175, 233, 233);
		line-height: 150%;
	}
	#bottomRight{
		margin: auto;
		top: 5%;
		width: 70vw;
		background-color: white;
	}
	#bottomRight div{
		width: 80%;
		height: 10vh;
		margin-top: 2%;
		margin-left: 10%;
		background-color: white;
	}
	#bottomRight div img{
		float: left;
        width: 10%;
        height: 100%;
        border: 0.1vh solid rgb(200, 200, 200);
	}
	#bottomRight div p{
		float: left;
		position: relative;
		left: 1%;
		margin-top: 2vh;
		width: 50%;
		height: 25%;
	}
	.pageBar{
		margin: auto;
		width: 15vw;
		height: 5vh;
		background-color: pink;
	}
</style>
<body>
	<nav>
		<img src="img/logo.png" alt="" id="log">
	</nav>
	<div id="box">
		<div id="head">
			<div id="information">
				<img src="" alt="" id="headImg">
				<div id="">
					<p id="name">
					    username
				    </p>
				    <p id="J">
					    个人简介
				    </p>
				</div>
			</div>
			<div class="row fc_box">
				<button id="a1" class="btn fc col-md-5" >我的关注</button>
			    <button id="a2" class="btn fc1 col-md-5" >我的粉丝</button>
			</div>
		</div>
		<div id="bottom">
			<div id="bottomRight">
			</div>
		</div>
	</div>
	<div class="pageBar"></div>
</body>
<script src="js/jquery.min.js"></script>
<script>
	$("#fans a").mouseenter(function() {
		$(this).css('color', 'pink');
	}).mouseleave(function() {
		$(this).css('color','rgb(93, 79, 87)');
	});
	
	window.onload=function(){
		searchUser();
		searchLike();
	}
	
	var params=location.search.substring(1);
	function searchUser(){
		$.ajax({
			type:"POST",
			url:"User.do",
			data:{
				userId:params.split("=")[1]
			},
			success:function(data){
				$("#headImg").attr("src",data.userHeadImg);
				$("#name").text(data.userName);
				$("#J").text(data.individualResume);
				$("#headImg").click(function(){
					window.location.href ="userInformation.html?id="+data.userId;
				})
			}
		})
	}
	
	var currentPage;
		 function searchfans(){
			$.ajax({
				type:"POST",
				url:"fans.do",
				data:{
					likeId:params.split("=")[1]
				},
				success:function(data){
					$("#bottomRight").empty();
					var fanses = data.data;
					for(var i=0;i<fanses.length;i++){
						var fans=fanses[i];
						var $div=$("<div onclick='seachuser("+fans.userId+")' ></div>").html("<img src='"+fans.userHeadImg+"'>");
						var $p=$("<p></p>").text(fans.userName);
						var $p1=$("<p></p>").text(fans.individualResume);
						$div.append($p).append($p1);
						$("#bottomRight").append($div);
					}
					makePageBar(data);
				}
			})
		}
		function makePageBar(data){
			$(".pageBar").empty();
			var totalPages = data.totalPages;
			var hasPrev = data.hasPrev;
			var hasNext = data.hasNext;
			var pageNum = data.pageNum;
			if(hasPrev){
				var $firstBtn = $("<a onclick='searchfans(1,6)' href='javascript:void(0);'>首页</a>");
				var $prevBtn = $("<a onclick='searchfans("+(pageNum-1)+",6)' href='javascript:void(0);'>上一页</a>");
				$(".pageBar").append($firstBtn).append($prevBtn);
			}
			
			for(var i =1; i<=totalPages;i++){
				var $pageBtn = $("<a onclick='searchfans("+i+",6)' href='javascript:void(0);'></a>").text(i);
				$(".pageBar").append($pageBtn);
			}
			if(hasNext){
				var $lastBtn = $("<a onclick='searchfans("+totalPages+",6)' href='javascript:void(0);'>尾页</a>");
				var $nextBtn = $("<a onclick='searchfans("+(pageNum+1)+",6)' href='javascript:void(0);'>下一页</a>");
				$(".pageBar").append($nextBtn).append($lastBtn);
			}
		}
		 function searchLike(){
				$.ajax({
					type:"POST",
					url:"UserLike.do",
					data:{
						likeId:params.split("=")[1]
					},
					success:function(data){
						$("#bottomRight").empty();
						var likes = data.data;
						for(var i=0;i<likes.length;i++){
							var like=likes[i];
							var $div=$("<div onclick='seachuser("+like.userId+")'></div>").html("<img src='"+like.userHeadImg+"'>");
							var $p=$("<p></p>").text(like.userName);
							var $p1=$("<p></p>").text(like.individualResume);
							$div.append($p).append($p1);
							$("#bottomRight").append($div);
						}
						makePageBarLike(data);
					}
				})
			}
			function makePageBarLike(data){
				$(".pageBar").empty();
				var totalPages = data.totalPages;
				var hasPrev = data.hasPrev;
				var hasNext = data.hasNext;
				var pageNum = data.pageNum;
				if(hasPrev){
					var $firstBtn = $("<a onclick='searchLike(1,6)' href='javascript:void(0);'>首页</a>");
					var $prevBtn = $("<a onclick='searchLike("+(pageNum-1)+",6)' href='javascript:void(0);'>上一页</a>");
					$(".pageBar").append($firstBtn).append($prevBtn);
				}
				
				for(var i =1; i<=totalPages;i++){
					var $pageBtn = $("<a onclick='searchLike("+i+",6)' href='javascript:void(0);'></a>").text(i);
					$(".pageBar").append($pageBtn);
				}
				if(hasNext){
					var $lastBtn = $("<a onclick='searchLike("+totalPages+",6)' href='javascript:void(0);'>尾页</a>");
					var $nextBtn = $("<a onclick='searchLike("+(pageNum+1)+",6)' href='javascript:void(0);'>下一页</a>");
					$(".pageBar").append($nextBtn).append($lastBtn);
				}
			}
		
			$("#a1").click(function(){
				searchLike();
			})
			$("#a2").click(function(){
				searchfans()
			})
			function seachuser(d){
				$.ajax({
					type:"POST",
					url:"User.do",
					data:{
						userId:d
					},
					success:function(data){
						if(data!=null){
							window.location.href ="userInfo.html?id="+data.userId+"&userId="+params.split("=")[1];
						}
					}
				})
			}
		$("#log").click(function(event){
			window.location.href ="index.html?id="+params.split("=")[1] ;
		})
</script>
</html>